import React, { Component } from "react";
import { Carousel, Grid } from "antd-mobile";
import line from "../../../images/icon/line.png";
import News from "../../../api/index/indexNews";
import { Link } from "react-router-dom";

// 在需要跳转详情页的地方,用:
// <Link to="/detail?id={pid}"></Link>
// 包起来

class NewGoods extends Component {
  render() {
    return (
      <div id="banner">
        <GridExample />
      </div>
    );
  }
}

// 手机列表
// let mobile = [

//     {
//         pimg: 'https://res8.vmallres.com/shopdc/pic/f5a42e01-48f8-4339-b063-b0f1012ecd97.jpg',
//         pname: 'HUAWEI Mate20',
//         desc: '直降500+6期免息',
//         price: '4899'
//     },
//     {
//         pimg: 'https://res8.vmallres.com/shopdc/pic/f5a42e01-48f8-4339-b063-b0f1012ecd97.jpg',
//         pname: 'HUAWEI Mate20',
//         desc: '直降500+6期免息',
//         price: '4899'
//     }
// ];

// const data1 = mobile.map((item, i) => ({
//     pimg: `${item.pimg}`,
//     pname: `${item.pname}`,
//     desc: `${item.desc}`,
//     price: `${item.price}`,
// }));

class GridExample extends Component {
  constructor() {
    super();
    this.state = {
      mobile: []
    };
  }
  componentDidMount() {
    News.then(res => {
      console.log(res.data.data)
      this.setState({
        mobile: res.data.data
      });
    });
  }
  product() {
    console.log(1);
  }
  render() {
    let mobile = this.state.mobile;
    const data1 = mobile.map((item, i) => ({
      pimg: `${item.imgUrl[0]}`,
      pname: `${item.pname}`,
      desc: `${item.introduction}`,
      price: `${item.pprice}`,
      id: `${item.pid}`
    }));
    return (
      <div>
        <div id="newGoods">
          <Grid
            data={data1}
            columnNum={2}
            hasLine={false}
            square={false}
            renderItem={dataItem => (
              <Link to={{pathname:`/detail`,state:{id:dataItem.id}}}>
              
                <div
                  style={{ padding: "0 .26rem" }}
                  onClick={this.product.bind(this)}
                >
                  <p>
                    <img
                      src={dataItem.pimg}
                      style={{
                        width: "10.625rem",
                        height: "10.625rem",
                        borderRadius: "0.26rem",
                        marginBottom: "0.58rem"
                      }}
                      alt=""
                    />
                  </p>
                  <div style={{ fontSize: "0.875rem" }}>
                    <p
                      style={{
                        color: "#000000",
                        fontWeight: "bold",
                        fontSize: ".91rem",
                        padding: "0 0.4rem",
                        height: "1.25rem",
                        lineHeight: "1.25rem",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                        overflow: "hidden",
                        marginBottom: "0.2rem"
                      }}
                    >
                      {dataItem.pname}
                    </p>
                    <div style={{ fontSize: '0.875rem' }}>
                        <p style={{
                            color: '#000000',
                            fontWeight: 'bold',
                            fontSize: '.91rem',
                            padding: '0 0.4rem',
                            height: '1.25rem',
                            lineHeight: '1.25rem',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            marginBottom: '0.2rem',
                        }}>{dataItem.pname}</p>
                        <p style={{
                            color: '#808080',
                            marginBottom: '0.5875rem',
                            padding: '0 0.4rem',
                            height: '0.9rem',
                            lineHeight: '0.9rem',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            fontFamily: 'HYQiHei EZS',
                            fontSize: '0.75rem',
                        }}>{dataItem.desc}</p>
                        <div style={{
                            boxSizing: 'border-box',
                            height: '1.5625rem',
                            lineHeight: '0.25rem',
                            margin: '0rem 0.4rem 1rem',
                            border: '0.05rem dashed #000000',
                            // borderRadius: '0 0.2rem'
                            borderBottomLeftRadius: '0.25rem',
                            borderBottomRightRadius: '0',
                            borderTopLeftRadius: '0',
                            borderTopRightRadius: '.25rem'
                        }}>
                            <div style={{
                                fontSize: '1.3rem',
                                width: '4.9rem',
                                height: '100%',
                                float: 'left',
                                lineHeight: '1.17rem',
                                textAlign: 'center',
                            }}>
                                <span style={{
                                    fontSize: '.75rem',
                                    position: "relative",
                                    top: '-0.15rem',
                                    verticalAlign: 'baseline',
                                    lineHeight: '0',
                                    textAlign: 'center',
                                }}>¥</span>
                                <span style={{
                                    fontSize: '1rem',
                                    fontWeight: '700',
                                    position: "relative",
                                    top: '0.1rem',
                                    lineHeight: '1.2rem',
                                    textAlign: 'center',
                                    marginLeft: ".13rem",
                                    marginRight: '.13rem'
                                }}>{dataItem.price}</span>
                            </div>
                            <img style={{ float: 'left', position: "relative", top: '.19rem' }} src={line} alt="" />
                            <div style={{
                                float: 'left',
                                fontSize: '.75rem',
                                height: '1.56rem',
                                lineHeight: '1.6rem',
                                overflowWrap: 'break-word',
                                textAlign: 'center',
                                textSizeAdjust: '100%',
                                width: '4.4rem'
                            }}>
                                <span style={{
                                    color: 'rgb(202, 20, 29)',
                                    cursor: 'pointer',
                                    display: 'inline-block',
                                    fontSize: '.75rem',
                                    fontWeight: '700',
                                    height: '1.56rem',
                                    lineHeight: '1.56rem',
                                    // maxWidth:'2.8rem',
                                    overflowWrap: 'break-word',
                                    overflowX: 'hidden',
                                    overflowY: 'hidden',
                                    textAlign: 'center',
                                    textSizeAdjust: '100%',
                                    whiteSpace: 'nowrap',
                                }}>立即购买</span>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>
              </Link>
            )}
          />
        </div>
      </div>
    );
  }
}

export default NewGoods;
